import React from "react";
import type {Metadata} from "next";
import localFont from "next/font/local";

// 注意css引入顺序
import "@mantine/core/styles.layer.css";
import "@mantine/carousel/styles.css";
import "@mantine/notifications/styles.css";
import "@mantine/charts/styles.css";
import "@mantine/dropzone/styles.css";
import "@mantine/dates/styles.css";
import "mantine-datatable/styles.layer.css";
import "./layout.css";

// MantineProvider用来包裹{children}，生效mantine样式
// ColorSchemeScript用来生效服务端渲染，注意放到head标签中
import {MantineProvider, ColorSchemeScript, createTheme} from "@mantine/core";
// Mantine系统通知组件
import {Notifications} from "@mantine/notifications";
// Mantine弹窗组件
import {ModalsProvider} from "@mantine/modals";
// Mantine日期组件
import {DatesProvider} from "@mantine/dates";

// 第三方水印组件
import {IpdWaterMark} from "@/components/IpdWaterMark/IpdWaterMark";

// Nextjs要求的写法
export const metadata: Metadata = {
  title: "IP Designer 2.0",
  description: "承载网数智化转型升级最佳实践",
};

// 自定义字体
const myFont = localFont({
  src: "../public/Fonts/NotoSans.ttf",
  display: "swap",
  variable: "--font-my-font",
});

// 自定义主题
const theme = createTheme({
  defaultRadius: "sm",
  autoContrast: true,
  luminanceThreshold: 0.3,
  fontFamily: "var(--font-my-font)",
});

// 系统决定颜色主题，需在ColorSchemeScript和MantineProvider都配置defaultColorScheme="auto"
export default function RootLayout({children}: {children: React.ReactNode}) {
  return (
    <html lang="zh" className={myFont.className}>
      <head>
        <ColorSchemeScript defaultColorScheme="auto" />
      </head>
      <body>
        <MantineProvider defaultColorScheme="auto" theme={theme}>
          <Notifications />
          <ModalsProvider>
            <IpdWaterMark>{children}</IpdWaterMark>
          </ModalsProvider>
        </MantineProvider>
      </body>
    </html>
  );
}
